<template>
    <el-container id="app">
        <el-header>
            <el-menu class="el-menu-demo" mode="horizontal">
                <el-menu-item index="1"  v-if="!token" @click="$router.push('/')">
                    Index
                </el-menu-item>
                <el-menu-item index="2" v-if="token" @click="$router.push('/job')">
                    Job
                </el-menu-item>
                <el-menu-item  index="3" v-if="token" @click="$router.push('/minder')">
                    Minder
                </el-menu-item>
                <el-menu-item  index="4"  v-if="token" @click="$router.push('/ele')">
                    UI
                </el-menu-item>
                <el-menu-item  index="5"  v-if="token" @click="logout">
                    Logout
                </el-menu-item>
                <el-menu-item   index="6" v-if="!token" @click="login">
                    Login
                </el-menu-item>
            </el-menu>


        </el-header>
        <el-main>
            <router-view/>
        </el-main>
    </el-container>

</template>
<script>
    import {mapActions, mapState} from 'vuex'

    export default {
        name: "Logout",
        computed: mapState({
            // 箭头函数可使代码更简练
            token: state => state.token,
        }),
        methods: {
            ...mapActions([
                'logout',
                'login',
            ]),
            openClick() {
                alert('11')
                this.$router.push('/')
            }
        },
    }
</script>
<style lang="less">
    .header-menu {

        width: 100%;
        margin-left: 0px;
        margin-right: 0px;
        padding: 0px 0px 0px 0px;
        height: 100%;
    }

</style>
